<script>
// import index from "vuex";
// import svgCaptcha from'svg-captcha';
// import MenuPage from "@/components/menuPage.vue";
import {psaawordLogin, reg, searchEnterprises,} from "@/api";
import HeaderPage from "@/components/headerPage.vue";
import FooterPage from "@/views/footerPage.vue";
// import srarchWindow from "@/components/srarchWindow.vue";
// import SrarchWindow from "@/components/srarchWindow.vue";

export default {
  name: "indexPage",
  components: {FooterPage, HeaderPage},
  data() {
    return {
      // captchaImg: '',
      userCaptcha: '',
      captchaText: '',
      showMessage: false,
      message: '',
      captchaImg: '',
      userInput: '',
      // captchaText: '',
      secrchparams: {
        pageNum: 1,
        pageSize: 10,
        companyName: ''
      },
      // companyName: '',
      tableData: [],
      hotList: '',
      // 企业搜索
      companyName: '',
      // 手机号登录
      messageLogin: {
        loginPhone: '',
        loginPassword: '',
      },
      // 密码登录
      formLoginpassword: {
        phoneNumber: '',
        password: '',
      },
      activeIndex: '1',
      activeIndex2: '1',
      enterprisesList: [],
      loginlogVisible: false,
      dialogRegister: false,
      registerList: {
        username: '',
        password: '',
        gender: '男',
        phoneNumber: '',
        nickname: '',

      },
      // 注册验证
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          // {min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 0, max: 100, message: '长度在 6 到 100 个字符', trigger: 'blur'}
        ],
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 0, max: 100, message: '无限制', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 0, max: 100, message: '无限制', trigger: 'blur'}
        ],

      }
    };
  },
  created() {
  },
  mounted() {
    // this.drawCaptcha();
  },
  methods: {
    onSearch() {
      this.$forceUpdate()
      // 空值全查
      if (this.companyName === '') {
        window.alert("输入内容为空！")
      } else {
        this.secrchparams.companyName = this.companyName
        searchEnterprises(this.secrchparams).then(res => {
          console.log(this.companyName)
          if (res.code === 2001) {
            // console.log(res.data)
            this.companyName = ''
            // 跳转页面
            if (this.$route.name === "searchPage") {
              return 0
            } else {
              this.$router.push({
                name: "searchPage",
                params: {
                  data: res.data.list
                }
              })
            }
          }
        })
      }

    },
    // 首页  热门搜索 暂时渲染
    // 立即注册
    ImmediateRegistration() {
      console.log(this.registerList)
      reg(this.registerList).then(res => {
        console.log(res)
      })
    },
    // 注册
    registerBtn() {
      this.loginlogVisible = false
      this.dialogRegister = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取验证码
    onphoneLogin() {
      // 获取验证码  手机号
      this.loginlogVisible = false
    },
    // 立即登录按钮
    onLogin(formLoginpassword) {
      // 接口
      psaawordLogin(formLoginpassword).then(res => {
        if (res.code === 2001) {
          this.$store.state.loginState = true
        }
      })
      this.loginlogVisible = false
    },
    // 搜索
  }
}

</script>

<template>
  <div class="box">
    <!--    <srarchWindow></srarchWindow>-->
    <div class="backgroundBox">
      <!-- 头部-->
      <header-page></header-page>
      <!-- 中心内容-->
      <div class="container">
        <!-- 标题盒子-->
        <div class="titleBox">都在用的企业查询平台</div>
        <!-- 搜索框盒子 使用table 切换  固定UI-->
        <div class="secrchBox">
          <!--热门搜索盒子-->
          <div class="hotSearch" style="height: 40px">
            <div class="secrchBox">
              <!--热门搜索盒子-->
              <div class="hotSearch" style="height: 40px">
                <a-input-search v-model="companyName" placeholder="请输入查询企业"
                                enter-button="搜索企业" size="large"
                                @search="onSearch(companyName)"/>
              </div>
            </div>
            <div class="hotBox">
            </div>
          </div>
        </div>
      </div>
      <!-- 登录的弹出框-->
      <!--      <div class="loginModel">-->
      <!--        <el-dialog-->
      <!--            :visible.sync="loginlogVisible"-->
      <!--            width="30%"-->
      <!--        >-->
      <!--          <div class="loginContent">-->
      <!--            <el-tabs type="border-card">-->
      <!--              <el-tab-pane label="手机号登录/注册">-->
      <!--                &lt;!&ndash;手机号登录&ndash;&gt;-->
      <!--                <el-form ref="form" :model="messageLogin" label-width="80px">-->
      <!--                  <el-form-item>-->
      <!--                    <el-input v-model="messageLogin.loginPhone" placeholder="请输入手机号"></el-input>-->
      <!--                  </el-form-item>-->
      <!--                  <el-form-item>-->
      <!--                    <el-row>-->
      <!--                      <el-col :span="15">-->
      <!--                        <div class="grid-content bg-purple">-->
      <!--                          <el-input v-model="messageLogin.loginPassword" placeholder="请输入四位验证码"></el-input>-->
      <!--                        </div>-->
      <!--                      </el-col>-->
      <!--                      <el-col :span="8">-->
      <!--                        <div class="grid-content bg-purple-light">-->
      <!--                          <el-button type="primary" plain @click="getMessage">获取验证码</el-button>-->
      <!--                        </div>-->
      <!--                      </el-col>-->
      <!--                    </el-row>-->
      <!--                    <div class="littleFont">未注册的手机号验证后将自动登录；仅支持中国大陆手机号注册</div>-->
      <!--                  </el-form-item>-->
      <!--                  <el-form-item>-->
      <!--                    <el-button type="primary" @click="onphoneLogin(formLoginphone)">立即登录</el-button>-->
      <!--                  </el-form-item>-->
      <!--                  <el-form-item style="margin: 0">-->
      <!--                    <el-button type="text" @click="registerBtn">立即注册</el-button>-->
      <!--                    <el-button type="text" style="float: right">忘记密码？</el-button>-->
      <!--                  </el-form-item>-->
      <!--                </el-form>-->
      <!--              </el-tab-pane>-->
      <!--              <el-tab-pane label="账号密码登录">-->
      <!--                &lt;!&ndash;表单密码登录&ndash;&gt;-->
      <!--                <el-form ref="form" :model="formLoginpassword" label-width="80px">-->
      <!--                  <el-form-item>-->
      <!--                    <el-input v-model="formLoginpassword.phoneNumber" placeholder="请输入登录手机号"></el-input>-->
      <!--                  </el-form-item>-->
      <!--                  <el-form-item>-->
      <!--                    <el-input v-model="formLoginpassword.password" placeholder="请输入登陆密码"-->
      <!--                              type="password"></el-input>-->
      <!--                  </el-form-item>-->
      <!--                  <el-form-item>-->
      <!--                    <el-button type="primary" @click="onLogin(formLoginpassword)">立即登录</el-button>-->
      <!--                    &lt;!&ndash;                    <el-button>取消</el-button>&ndash;&gt;-->
      <!--                  </el-form-item>-->
      <!--                </el-form>-->
      <!--              </el-tab-pane>-->
      <!--            </el-tabs>-->
      <!--          </div>-->
      <!--        </el-dialog>-->
      <!--      </div>-->
      <!-- 注册弹出框-->
      <!--      <div class="registerBox">-->
      <!--        <el-dialog-->
      <!--            title="注册个人信息"-->
      <!--            :visible.sync="dialogRegister"-->
      <!--            width="30%"-->
      <!--        >-->
      <!--          &lt;!&ndash;弹出框内容&ndash;&gt;-->
      <!--          <div>-->
      <!--            <el-form :model="registerList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
      <!--              <el-form-item label="" prop="username">-->
      <!--                <el-input v-model="registerList.username" placeholder="用户名称"></el-input>-->
      <!--              </el-form-item>-->
      <!--              <el-form-item label="" prop="nickname">-->
      <!--                <el-input v-model="registerList.nickname" placeholder="昵称"></el-input>-->
      <!--              </el-form-item>-->
      <!--              <el-form-item label="" prop="password">-->
      <!--                <el-input v-model="registerList.password" placeholder="密码"></el-input>-->
      <!--              </el-form-item>-->
      <!--              &lt;!&ndash;              <el-form-item label="重复密码" prop="name">&ndash;&gt;-->
      <!--              &lt;!&ndash;                <el-input v-model="registerList.name"></el-input>&ndash;&gt;-->
      <!--              &lt;!&ndash;              </el-form-item>&ndash;&gt;-->
      <!--              <el-form-item label="" prop="phoneNumber">-->
      <!--                <el-input v-model="registerList.phoneNumber" placeholder="手机号码"></el-input>-->
      <!--              </el-form-item>-->
      <!--              <el-form-item>-->
      <!--                <el-button type="primary" @click="ImmediateRegistration">立即注册</el-button>-->
      <!--              </el-form-item>-->
      <!--            </el-form>-->
      <!--          </div>-->
      <!--          <span slot="footer" class="dialog-footer">-->
      <!--          </span>-->
      <!--        </el-dialog>-->
      <!--      </div>-->
    </div>
    <!--底部-->
    <footer>
      <footer-page></footer-page>
    </footer>
  </div>
</template>

<style scoped lang="scss">
.captcha-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.refresh {
  margin-top: 50px;
}

.captcha-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.registerBox {
  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
    text-align: center;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 50%;
  }
}

.loginModel {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
    text-align: center;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 50%;
  }

}

::v-deep .el-menu--horizontal > .el-menu-item {
  color: white;
}

::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  color: white;
}

.littleFont {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}


* {
  margin: 0 auto;
}

.box {
  width: 100%;
  height: 100%;
}

.hotBox {
  margin-top: 20px;
  display: flex;
}

::v-deep .ant-tabs-nav {
  margin-left: 100px;
}

.hotEnterprises {
  //white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 786px;
  height: 56px;
  vertical-align: top;
  text-align: left;

  a {
    display: inline-block;
    vertical-align: top;
    margin-right: 24px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 22px;
    color: #e0e0e0;
  }
}

.hotTitle {
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 32px;
  padding-top: 5px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 4px;
  text-indent: 4px;
  line-height: 22px;
  background: hsla(0, 0%, 100%, .16);
}

.hotSearch {
  //display: flex;
  width: 880px;
  margin-top: 20px;
}

::v-deep .ant-tabs-nav-scroll {
  border: none;
}

.titleBox {
  width: 650px;
  display: inline-block;
  margin-bottom: 33px;
  margin-top: 40px;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 8px;
  text-indent: 7px;
  color: #fff;
}

.container {
  text-align: center;
  width: 1248px;
  margin: 0 auto;
  //background-color: red;
}

* {
  margin: 0 auto;
}

::v-deep .ant-menu {
  //background-color: rgb(1, 84, 165);
  //opacity: 0.5;
  color: white;
  border: none;
}

ul {
  display: flex;

  li {
    //padding: 10px;
    margin: 5px 8px 5px 6px;
  }
}

.line {
  height: 15px;
  border-right: 1px solid whitesmoke;
}

header {
  box-shadow: none !important;
  height: 70px !important;

  a {
    color: white !important;
  }

  .headerContent {
    display: flex;
    justify-content: space-between;
    //background-color: red;
    height: 100%;
    margin: 0 auto;
    width: 1248px;
  }

  .title {
    margin-left: 5px;
    color: white;
    font-size: 24px;
    font-weight: 700;
  }
}

.flexBoxleft {
  display: flex;
  align-items: center;
  margin-left: 0;
}

::v-deep .el-menu-demo:hover {
  background-color: #0454ac !important;
}

.flexBoxright {
  ::v-deep .el-menu-demo {
    background-color: #0454ac !important;
  }

  .flexBoxright:hover {
    background-color: #0454ac !important;
  }

  display: flex;
  align-items: center;
  margin-right: 0;
}

//.backgroundBox {
//  width: 100%;
//  //height: 445px;
//  background-image: url("../../src/assets/menu/banner.jpg");
//}

header {
  box-shadow: none !important;
  height: 70px !important;

  ::v-deep .el-menu.el-menu--horizontal {
    border: none;
  }

  a {
    color: white !important;
  }

  .headerContent {
    display: flex;
    justify-content: space-between;
    //background-color: red;
    height: 100%;
    margin: 0 auto;
    width: 1248px;
  }

  .title {
    margin-left: 5px;
    color: white;
    font-size: 24px;
    font-weight: 700;
  }
}

.flexBoxleft {
  display: flex;
  align-items: center;
  margin-left: 0;
}

.flexBoxright {
  color: white !important;
  display: flex;
  align-items: center;
  margin-right: 0;

  ::v-deep .el-menu-demo {
    color: white !important;
  }
}

::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  color: white;
}

.backgroundBox {
  width: 100%;
  height: 100vh;
  background: url("@/assets/menu/banner.jpg") no-repeat;
  background-size: cover;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
